<template>
 <div class="app-container">
    <div class="btn-button">
      <el-button type="primary" @click="submitForm('form')">保存</el-button>
    </div>
    <el-form ref="form" :model="form" label-width="120px" size="medium">
      <el-form-item label="问题描述" prop="disqualificationDesc">
          <el-input type="textarea" v-model="form.disqualificationDesc" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="工段编号" prop="sectionNo" v-if="form.sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="责任人工号" prop="scanJobNumber">
          <el-input clearable v-model="form.scanJobNumber" style="width:300px"/>
      </el-form-item>
      <el-form-item label="责任人工位" prop="stationIdentifying">
          <el-input v-model="form.stationIdentifying" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="责任部门" prop="type">
          <el-input v-model="form.type" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="责任工序" prop="upProcess">
          <el-input v-model="form.upProcess" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="问题小类" prop="issueLittle">
        <!-- <el-input v-model="form.issueLittle" style="width:300px;margin-right: 10px" clearable/>
        <el-button style="margin-right: 10px;" type="primary" @click="getIssueIndexes(item)">查询</el-button> -->
        <el-cascader
        v-model="form.issueLittle"
        :options="issueLists"
        :show-all-levels="false"
        clearable="true"
        placeholder="选择问题小类"
        :expandTrigger="'hover'"
        ref="cascader"
        filterable
        style="width:300px;"
        @change="handleChange"
        @focus="getIssueLittle"></el-cascader>
      </el-form-item>
      <el-form-item label="问题大类" prop="issueLarge">
        <el-input v-model="form.issueLarge" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="问题索引" prop="issueIndexes">
        <el-input v-model="form.issueIndexes" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="责任环节" prop="responsibility">
        <el-input v-model="form.responsibility" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="缺陷代码" prop="issueId">
        <el-input v-model="form.issueId" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="扣除品质系数" prop="natureCoefficient">
          <el-input v-model="form.natureCoefficient" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="产品名" prop="produceName">
          <el-input v-model="form.produceName" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="规格" prop="specification">
          <el-input v-model="form.specification" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="工作中心" prop="workCenter">
          <el-input v-model="form.workCenter" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="工序名称" prop="processName">
          <el-input v-model="form.processName" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="产品编号" prop="technologyNo">
          <el-input v-model="form.technologyNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="表单创建时间" prop="createTime">
          <el-input v-model="form.createTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="工人扫码时间" prop="scanTime">
          <el-input v-model="form.scanTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="质量问题图片1">
          <el-image
            style="width: 200px; height: 200px"
            :src="form.imageUrl"
            :fit="fit"
            :error="imageError"
            :preview-src-list="previewList"
          >
            <!-- <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div> -->
          </el-image>
      </el-form-item>
      <el-form-item label="问题视频">
          <video controls class="videoItem" :width="videoWidth" :height="videoHeight" autoplay loop="loop">
	          <source :src="this.form.videoUrl" type="video/webm">
          </video>
      </el-form-item>
    </el-form>

    <el-drawer
      title="选择问题小类"
      :visible.sync="drawer">
      <div class="issues">
        <div class="issues-btn" v-for="(item,index) in issueList" :key="index">
          <el-button type="success" @click="selectIssue(item)">{{ item.issueLittle }}-{{ item.issueLarge }}-{{ item.responsibility }}</el-button>
        <!-- <p v-for="(item,index) in issueList" :key="index">{{ item.issueLittle }}</p> -->
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { getDisqualificationPage,
         getIssueIndexes,
         findissueLargeGroupissueLittle,
         updateDisqualification } from '@/api/qualityQuery'
export default {
  name:'qualityDetail',
    data() {
        return {
            form: {
                disqualificationDesc: '',           //问题描述
                imageUrl: [],                       //问题图片
                videoUrl: '',                       //问题视频
                natureCoefficient: '',              //扣除的品质系数
                processName: '',                    //工序名称
                technologyNo: '',                   //产品编号
                createTime: '',                     //创建时间
                produceName: '',                    //产品名
                specification: '',                  //规格
                workCenter: '',                     //工作中心
                sectionNo: '',                      //工段编号
                stationId: '',                      //责任人工位
                stationIdentifying: ''              //责任人工位
            },
            getItem: '',                            //queryHomePage页面路由传递过来的信息
            fit: 'contain',                         //确定图片适应容器框的方式
            previewList: [],                        //图片预览功能图片数据的存放数组
            videoWidth: '300px',                    //视频播放窗口的宽度
            videoHeight: '151px',                    //视频播放窗口的高度
            listQuery: {            //查询信息存放表单
                disqualificationId: ''
            },
            issueList: [],
            issueLists: [],
            primaryList: [],
            drawer: false,
            rules: {
              issueLittle: [
                { required: true, message: '请选择问题小类', trigger: 'blur' },
              ]
            }
        }
    },
    methods: {
        // 切割图片url组成的字符串成为数组
        cuttingStr(value) {
            let imageArr = []                           //存储图片url的数组
            if(value != '') {                           //第一层嵌套判断是否有图片，为空直接返回一个空数组
                imageArr = value.split('|')             //第二层嵌套将图片拆分为数组
                return imageArr
            } else {
                return imageArr
            }
        },
        // for循环对disqualificationType数据进行遍历，将数字转化为对应的职位字母
        async getDisqualificationPage() {
            const query = Object.assign({},this.listQuery)
            const {data} = await getDisqualificationPage(query)
            this.form = data.records[0]
            this.form.type = this.form.type == '0'?'装配车间':
                            this.form.type == '1'?'数控车间':
                            this.form.type == '2'?'焊接':
                            this.form.type == '3'?'喷涂':
                            this.form.type == '4'?'物料':
                            this.form.type == '5'?'供应商':''
            this.$refs['cascader'].inputValue = this.form.issueLittle
            let arr = this.form.imageUrl==null?[]:this.cuttingStr(this.form.imageUrl)
            if(arr.length == 0) {
              console.log('没有图片')
            } else {
              this.previewList = arr                          //将数组arr赋值给图片预览功能图片数据的存放数组
              this.form.imageUrl = arr[0]                        //将数组的第一张图片作为显示在列表中的图片
            }
            this.form.videoUrl = this.form.videoUrl
        },
        // 输入内容查询
        async getIssueIndexes() {
            const {data} = await getIssueIndexes({issueIndexes: this.form.issueLittle})
            this.issueList = data
            this.drawer = true
        },
        // 将问题小类获取的参数填入表单
        selectIssue(value) {
          this.form.issueIndexes = value.issueIndexes
          this.form.issueLarge = value.issueLarge
          this.form.issueId = value.issueId
          this.form.responsibility = value.responsibility
          this.form.issueLittle = value.issueLittle
          this.drawer = false
        },
        submitForm(formName){
          this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit!!');
            this.updateDisqualification()
          } else {
            console.log('error submit!!');
            return false;
          }
          });
        },
        async updateDisqualification(){
          const data = await updateDisqualification({
            disqualificationId: this.form.disqualificationId,
            issueId: this.form.issueId,
            jobNumber: this.form.scanJobNumber
          })
          const errMsg = data.msg
          if(data.code=='1'){
            this.$message({
                showClose: true,
                message: errMsg,
                type: 'success'
            })
          }else{
              this.$message({
                  showClose: true,
                  message: errMsg,
                  type: 'warning'
              })
          }
        },
        handleChange(value) {
          console.log(this.primaryList,value)
          this.primaryList.forEach(item=>{
            if(item.name == value[0]){
              item.array.forEach(items=>{
                if(items.issueLittle == value[1]){
                  this.selectIssue(items)
                }
              })
            }
          })
        },
        // 获取类别以及小类
        // 处理数据，生成级联选择的数据
        async getIssueLittle(){
            const {data} = await findissueLargeGroupissueLittle()
            this.primaryList = data
            let arr = JSON.parse(JSON.stringify(data))
            let dataNew = []
            arr.forEach(item => {
              item.label = item.value = item.name
              item.array.forEach(items=>{
                items.label = items.value = items.issueLittle
              })
            });
            arr.map(item1 => {
              let _item = JSON.parse(JSON.stringify(item1).replace('array','children'));
              dataNew.push(_item)
            })
            this.issueLists = dataNew
        }
    },
    // 进入页面时获取上个页面路由传递过来的信息
    mounted() {
      this.listQuery.disqualificationId = this.$store.state.app.disqualificationId
      this.getDisqualificationPage()
    }
}
</script>

<style>
.btn-button{
    display: flex;
    justify-content: flex-end;
}
.issues{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 90%;
  overflow:auto;
}
.issues-btn{
  margin-top: 15px;
}
</style>